<template>
	<view class="container">
		<view class="header" @click="test">

		</view>
		<view style="height: 200rpx;width: 100%;"></view>
		<view class="ku">
			<view class="item" v-for="(item,index) in videoInfoList">
				<view class="item-header">
					<view class="title">
						{{item.videoCategory}}+{{item.videoDay}}
					</view>
					<view class="classify">
						{{item.videoCategory}}
					</view>
				</view>
				<view class="gongchengid">
					(工程ID:{{item.id}})
				</view>
				<view class="tip" v-show="false">
					已上传视频素材数：4个 最多可生成视频数：32个
				</view>
				<view class="time" v-show="false">
					<view style="font-size: 28rpx;">
						<text>{{item.videoTime}}</text>
					</view>
					<view>
						距离过期仅剩89天
					</view>
				</view>

				<view class="footer">
					<view class="footer-left">
						<view class="xiugai" v-show="false">
							修改
						</view>
						<view class="xiugai" v-show="false">
							数据统计
						</view>
						<view class="seevideo" @click="lookVideo(item)">
							查看视频
						</view>
						<view class="douyin" @click="navDyPublish(item)">
							DY发布
						</view>
						<view class="douyin" v-show="false">
							XHS发布
						</view>
					</view>
					<image src="../../static/images/delete.png" style="height: 46rpx;width:46rpx;" @click="deleteVideo(item)"></image>
				</view>
			</view>
		</view>
		

	</view>

</template>

<script>
	import Http from "@/utils/http"
	const http = new Http()
	const app = getApp()
	export default {
		data() {
			return {
				videoInfoList:[],
				shopId:'',
				
			}
		},
		onLoad() {
			this.getInfo();
		},
		onShow() {
		},
		mounted() {
			this.shopId = app.globalData.shopId
		},
		methods: {
			//删除视频
			deleteVideo(item){
				uni.showModal({
					title:"是否删除该视频",
					success: (confirm) => {
						if(confirm.confirm){
							console.log(item);
							// http.get('v1/jiaoben/delete/'+id).then(res=>{
							// 	if(res.data.code == 200){
							// 		uni.showToast({
							// 			title:'删除成功',
							// 			icon:'success'
							// 		})
							// 		this.getInfo();
							// 	}
							// })
							
							http.post("v1/jiaoben/deleteBaocun", {
								id: item.id,
								video:item.video
							}).then(res => {
								if (res.data.code != 200) {
									return uni.showToast({
										title: res.data.msg
									})
								}
								uni.showToast({
									title: "删除成功"
								})
								this.getInfo();
							})
						}
					}
				})
			},
			//查看视频详情
			lookVideo(item){
				uni.navigateTo({
					url:'/subpkg/mkvideo/myJianjiKu?id='+item.id
				})
			},
			//获取生成视频信息
			getInfo(){
				let obj = {
					shopId:this.shopId
				}
				http.post('v1/jiaoben/Joblist',obj).then(res=>{
					console.log(res);
					this.videoInfoList = res.data.data;
					this.videoInfoList = this.videoInfoList.reverse();
				})
			},
			//导航到抖音发布
			navDyPublish(item){
				if(item.videoStatus != "Success"){
					return uni.showToast({
						title:"视频暂未合成成功",
						icon:"error"
					})
				}
				uni.navigateTo({
					url:"/subpkg/douyinPublish/douyinPublish?jobId="+item.jobId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #fff;
	}

	.header {
		background-image: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/1710990508921b0a0ab8061f342a98f88cb730329b8e3.jpg');
		height: 200rpx;
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		top: 0;
	}

	.ku {

		.item {
			margin: 30rpx 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;

			.item-header {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.classify {
					font-size: 28rpx;
					color: #d4237a;
				}
			}

			.gongchengid {
				font-size: 28rpx;
				color: #666;
				margin: 16rpx 0;
			}

			.tip {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 10rpx;
			}

			.time {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
				color: #666;
				font-size: 28rpx;
			}
		}


	}

	.footer {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;

		.footer-left {
			display: flex;
			font-size: 28rpx;
			margin-top: 10rpx;

			.xiugai {
				padding: 4rpx 10rpx;
				border: 1rpx solid #666;
				color: #333;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

			.seevideo {
				padding: 4rpx 10rpx;
				border: 1rpx solid #00008B;
				color: #00008B;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

			.douyin {
				padding: 4rpx 10rpx;
				border: 1rpx solid #00008B;
				color: #fff;
				background: #00008B;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}
		}
	}

</style>